import './JsonText.scss'
import { useState } from 'react'
import { Empty } from 'antd'
import { useMount, useRequest, useSize } from 'ahooks'

import { Http } from '../../../../Common/Api'
import { TitleSmall001 } from '../Common/SmallTitle'
import { ColumnConfigA01Template, RadialBarConfigA01Template } from './AssetsCharts'

import { useRef } from 'react'

import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

export const JsonTextA01 = () => {
    const [TextData, setTextData] = useState()
    const { runAsync: getData } = useRequest(Http, { manual: true, onSuccess: res => setTextData(res) })
    useMount(() => {
        getData({ url: 'getJsonInfoByUuid', data: { uuid: 'InvestmentText' } })
    })
    return (
        <div className="JsonTextA01">
            {TextData ? (
                TextData.map(({ uuid, title, color, content }) => (
                    <div key={uuid}>
                        <span style={{ color }}>{title} :</span>
                        <span>{content}</span>
                    </div>
                ))
            ) : (
                <Empty />
            )}
        </div>
    )
}

export const JsonTextA02 = () => {
    const [TextData, setTextData] = useState()
    const { runAsync: getData } = useRequest(Http, { manual: true, onSuccess: res => setTextData(res) })
    useMount(() => {
        getData({ url: 'getJsonInfoByUuid', data: { uuid: 'EngineeringA01' } })
    })
    return (
        <div className="JsonTextA02">
            {TextData &&
                TextData.map(({ uuid, title, content }) => (
                    <div key={uuid}>
                        <div>{title}</div>
                        <div>{content}</div>
                    </div>
                ))}
        </div>
    )
}

export const JsonTextA03 = () => {
    const [TextData, setTextData] = useState()
    const { runAsync: getData } = useRequest(Http, { manual: true, onSuccess: res => setTextData(res) })
    useMount(() => {
        getData({ url: 'getJsonInfoByUuid', data: { uuid: 'EngineeringA02' } })
    })

    const Top = [
        { uuid: 1, label: '标段', flex: 1 },
        { uuid: 2, label: '单位名称', flex: 2 },
        { uuid: 3, label: '工作范围和内容', flex: 5 },
        { uuid: 4, label: '联系人', flex: 1 },
        { uuid: 5, label: '电话', flex: 2 },
    ]

    return (
        <div className="JsonTextA03">
            <div className="Box">
                <div className="Top">
                    {Top.map(({ uuid, label, flex }) => (
                        <div key={uuid} style={{ flex }}>
                            {label}
                        </div>
                    ))}
                </div>
                <div className="List">
                    {TextData &&
                        TextData.map(({ uuid, tenders, name, content, contacts, phone }) => (
                            <div key={uuid}>
                                <div style={{ flex: Top[0].flex }}>{tenders}</div>
                                <div style={{ flex: Top[1].flex }}>{name}</div>
                                <div style={{ flex: Top[2].flex }}>{content}</div>
                                <div style={{ flex: Top[3].flex }}>{contacts}</div>
                                <div style={{ flex: Top[4].flex }}>{phone}</div>
                            </div>
                        ))}
                </div>
            </div>
        </div>
    )
}

export const JsonTextA04 = () => {
    const [TextData, setTextData] = useState()
    const { runAsync: getData } = useRequest(Http, { manual: true, onSuccess: res => setTextData(res) })
    useMount(() => {
        getData({ url: 'getJsonInfoByUuid', data: { uuid: 'GraphicProgressA01' } })
    })

    return (
        <div className="JsonTextA04">
            {TextData ? (
                TextData.map(({ uuid, title, color, content }) => (
                    <div key={uuid}>
                        <span style={{ color }}>{title}</span>
                        <span>{content}</span>
                    </div>
                ))
            ) : (
                <Empty />
            )}
        </div>
    )
}

const JsonTextA05DataA01 = [
    {
        name: '合同金额',
        type: 'B-1',
        A02: '中交第二航务工程局有限公司',
        A03: 'K43+100-K49+880',
        A04: '6.78',
        A05: '桥梁 涵洞 路基 机电 交通安全设施',
        value: 636200000,
    },
    {
        name: '合同金额',
        type: 'B-2',
        A02: '中交路桥建设有限公司',
        A03: 'K49+880-K68+500 K43+100-K68+500',
        A04: '路基18.62 路面25.40',
        A05: '桥梁 涵洞 路基 路面 机电 交通安全设施',
        value: 1484515058,
    },
    {
        name: '合同金额',
        type: 'B-3',
        A02: '黑龙江省龙建路桥第一工程有限公司',
        A03: ' K70+511.5-K72+225 ',
        A04: '2.33',
        A05: '桥梁',
        value: 233800000,
    },
    {
        name: '合同金额',
        type: 'B-4',
        A02: '黑龙江省龙建路桥第四工程有限公司',
        A03: 'K68+500-K93+308',
        A04: '24.8',
        A05: '桥梁 涵洞 路基 路面',
        value: 1745660000,
    },
    {
        name: '合同金额',
        type: 'B-5',
        A02: '龙建路桥股份有限公司',
        A03: 'K68+500-K93+308',
        A04: '',
        A05: '机电 交通安全设施',
        value: 105570000,
    },
    {
        name: '合同金额',
        type: 'B-6',
        A02: '黑龙江伊哈公路工程有限公司',
        A03: 'K43+100-K93+308.314',
        A04: '',
        A05: '房建 绿化',
        value: 72570000,
    },
    {
        name: '合同金额',
        type: 'B-7',
        A02: '黑龙江省一恒建设有限公司',
        A03: 'K43+100-K93+308.314',
        A04: '',
        A05: '房建',
        value: 50000000,
    },
]
const JsonTextA05DataA02 = [
    {
        type: 'JB1',
        A02: '黑龙江省公路工程监理咨询有限公司',
        A03: 'K43+100-K56+000',
        value: 12.9,
        A05: '桥梁 涵洞  路基 路面 绿化 机电 交通安全设施',
    },
    {
        type: 'JB2',
        A02: '黑龙江华正交通工程监理有限责任公司',
        A03: 'K56+000-K70+000',
        value: 14,
        A05: '桥梁 涵洞  路基 路面 绿化 交通安全设施',
    },
    {
        type: 'JB3',
        A02: '黑龙江省公路工程监理咨询有限公司',
        A03: 'K70+000-K79+000 ',
        value: 9,
        A05: '桥梁 涵洞  路基 路面 绿化 交通安全设施',
    },
    {
        type: 'JB4',
        A02: '北京中交公路桥梁工程监理有限公司/黑龙江和泰恒信建设工程管理有限公司联合体',
        A03: 'K79+000-K93+308 ',
        value: 14.308,
        A05: '桥梁 涵洞  路基 路面 交通安全设施 绿化 房建',
    },
]

export const JsonTextA05 = () => {
    const style = {
        ColumnColor:
            'l(90) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
        ColumnWidth: 16,
        ColumnLegend: false,
        LegendPossion: 'top',
        LegendoffsetY: 10,
        Legendfill: '#B2FBFD',
        LegendfontSize: 12,
        XLine: '#B2FBFD',
        XLabel: '#B2FBFD',
        XTick: '#B2FBFD',
        YTitle: '',
        YTColor: '#B2FBFD',
        YPosi: 'end',
        YAuto: true,
        YOffset: 50,
        YColoc: '#B2FBFD',
        YNumber: 5,
        YGrid: 'rgba(155, 253, 255, 0.35)',
        BarStatus: false,
        BarHeight: 8,
        BarWidth: 80,
        BarTrack: 'rgba(178, 251, 253, 0.2)',
        BarThumb: 'rgba(178, 251, 253, 1)',
        BarHover: '#367EF2',
    }

    const DataMapping = { 1: JsonTextA05DataA01, 2: JsonTextA05DataA02 }
    const RederMapping = {
        1: [
            { icon: 'tenderA01.png', title: '所属标段', value: 'type' },
            { icon: 'tenderA02.png', title: '施工单位', value: 'A02' },
            { icon: 'tenderA03.png', title: '起讫桩号', value: 'A03' },
            { icon: 'tenderA04.png', title: '里程(km)', value: 'A04' },
            { icon: 'tenderA05.png', title: '工作内容', value: 'A05' },
            { icon: 'tenderA06.png', title: '合同金额', value: 'value' },
        ],
        2: [
            { icon: 'tenderA01.png', title: '所属标段', value: 'type' },
            { icon: 'tenderA02.png', title: '施工单位', value: 'A02' },
            { icon: 'tenderA03.png', title: '起讫桩号', value: 'A03' },
            { icon: 'tenderA04.png', title: '长度(km)', value: 'value' },
            { icon: 'tenderA05.png', title: '工作内容', value: 'A05' },
        ],
    }

    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const Template = ({ type }) => {
        const Data = DataMapping[type]
        const Mapping = RederMapping[type]

        const [Active, setActive] = useState(Data[0].type)

        return (
            <div className="Template">
                <div className="Template_active">
                    {Data.map(({ type }) => (
                        <div key={type} className={type === Active ? 'active' : ''} onClick={() => setActive(type)}>
                            {type}
                        </div>
                    ))}
                </div>
                <div className="Template_data">
                    {Mapping.map(({ icon, title, value }, index) => (
                        <div key={index}>
                            <img src={imageUrl + icon} alt="" />
                            <div>{title} : </div>
                            <div>{Data.find(v => v.type === Active)[value]}</div>
                        </div>
                    ))}
                </div>
            </div>
        )
    }

    const color = {
        JB1: 'rgba(151, 255, 246, 1)',
        JB2: 'rgba(87, 236, 129, 1)',
        JB3: 'rgba(255, 243, 56, 1)',
        JB4: 'rgba(255, 164, 83, 1)',
    }

    return (
        <div className="JsonTextA05">
            <TitleSmall001 title="施工标段" />
            <div className="JsonTextA05_A01">
                <div ref={ChartsBox}>
                    {size && <ColumnConfigA01Template data={JsonTextA05DataA01} size={size} style={style} />}
                </div>
                <Template type={1} />
            </div>
            <TitleSmall001 title="监理标段" />
            <div className="JsonTextA05_A02">
                <div>
                    <RadialBarConfigA01Template data={JsonTextA05DataA02} style={{ color }} />
                    <div>
                        {JsonTextA05DataA02.map(({ type, value }) => (
                            <div key={type}>
                                <div style={{ background: color[type] }}></div>
                                <div>{type} : </div>
                                <div>{value}km</div>
                            </div>
                        ))}
                    </div>
                </div>
                <Template type={2} />
            </div>
        </div>
    )
}
